<template>
<div>
    <NuxtLink to="/">
      Home
    </NuxtLink>
    <NuxtLink to="/about">
      About
    </NuxtLink>
    <NuxtPage />
     {{ data }}
    <button :disabled="pending" @click="refresh">
      Refrash Data
    </button>

    <hr/>
     Server response: {{ data1 }}

     <hr>
     <Head :lang="'' + dynamic">
      <Title>{{ dynamic }} title</Title>
      <Meta name="description" :content="`My page's ${dynamic} description`" />
      <Link rel="preload" href="/test.txt" as="script" />
    </Head>

    <button class="blue" @click="dynamic = Math.random() * 100">
      Clickme
    </button>
  </div>
</template>

<script setup>
const resp = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
// console.log(resp)
const { data, refresh, pending } = resp;
const { data1 } = await useFetch("/api/test",{params: {foo:'bar'}});
console.log(data1);
const dynamic = ref(49);
const  head ={
    title: 'Another title'
}
</script>
